import React, { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
    const inputRef = useRef();
    useImperativeHandle(ref, () => ({
        focus: () => {
            inputRef.current.focus();
            return "focused";
        }
    }));
    return (
        <div>
          <input ref={inputRef} type="text" />
          <button onClick={props.onClick}>Focus the input</button>
        </div>
      );
    });



export default () => {
    const ref = useRef();
    const buttonClick = useCallback(() => {
        alert(ref.current.focus());
    });
    return (
        <div>
            <FancyInput ref={ref} onClick={buttonClick} />
        </div>
    );
}